<template>
  <div class="shouquanneirong1">
      <p>
          本协议自双方签字盖章之日起生效，授权期限为
          <span class="editable" contenteditable="true" @input="updateAge_limit" @keydown="handleKeydown">{{ work.age_limit }}</span>
          年。授权期限届满后，乙方应立即停止使用剧本，并删除或销毁所有基于本协议制作的改编作品。
      </p>
  </div>
</template>

<script lang="ts" setup>
import { inject,ref,computed  } from 'vue';
import { useRoute } from 'vue-router';
import { useStore } from 'vuex';
const axios = inject('axios'); // 注入 axios
// 获取路由信息
const route = useRoute();
const store = useStore();
// 计算属性从 Vuex 获取授权内容
const authorization = computed(() => store.getters.getAuthorization);

//更新 Vuex 中的授权内容
const updateAge_limit = (event: InputEvent) => {
  const newAge_limit = (event.target as HTMLElement).innerText;
  console.log("newAge_limit:" + newAge_limit);
  
  store.dispatch('setAuthorization', {age_limit:newAge_limit,time: authorization.value.time,platform: authorization.value.platform,authorization_fee: authorization.value.authorization_fee });
};

const handleKeydown = (event) => {
  if (event.key === "Enter") {
    event.preventDefault(); // 防止换行
  }
};
// 定义 props
const props = defineProps({
  work: {
      type: Object,
      required: true
  },
  hetong: {
      type: Object,
      required: true
  },
  user: {
      type: Object,
      required: true
  }
});

// 更新授权期限
const updateAgeLimit = (event) => {
  props.work.age_limit = event.target.innerText.trim(); // 更新 work.age_limit
  console.log("更新授权期限:", props.work.age_limit);
};
</script>

<style scoped>
.editable {
  display: inline-block;
    position: relative; /* 需要进行相对定位，以支持伪元素 */
    min-width: 30px; /* 设置最小宽度以防止元素过于狭窄 */
    cursor: text; /* 文本输入光标 */
    text-align: center; /* 水平居中 */
    padding: 0 10px; /* 给左右添加一些填充，以保持左右两边的下划线 */
}

/* 创建下划线效果 */
.editable::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0; /* 右侧扩展至父元素的右边缘 */
    bottom: 0; /* 确保下划线在文本底部 */
    border-bottom: 1px solid black; /* 下划线样式 */
    pointer-events: none; /* 让下划线不影响文本输入 */
}

.editable:focus {
  outline: none; /* 去掉聚焦时的边框 */
}
</style>
